<template>
  <div>
    <van-cell-group>
      <div v-for="index in count">
        <van-cell
          disabled
          :title="index"
        >
          <van-icon
            slot="right-icon"
            name="close"
            class="van-cell__right-icon"
            @click="delRule(index)"
          />
        </van-cell>
        <van-field
          v-model="title[index]"
          required
          clearable
          autosize
          type="textarea"
          rows="1"
          label="题目"
          placeholder="请输入题目"
        />
        <van-field
          v-model="value[index]"
          required
          clearable
          label="分数"
          type="number"
          placeholder="请输入分数"
        />
      </div>
      <van-button size="large" style="font-size: 30px; margin: 20px 0;" @click="addRule" id="delete">+</van-button>
      <van-button size="large" @click="submitInfo">提交</van-button>
    </van-cell-group>
  </div>
</template>

<script>
  import {Field, Cell, CellGroup, Stepper, Button, Icon, Dialog, Toast} from 'vant';

  export default {
    name: "AddRules",
    components: {
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Stepper.name]: Stepper,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Dialog.name]: Dialog,
      [Toast.name]: Toast,
    },
    data() {
      return {
        title: [],
        value: [],
        count: 1
      }
    },
    methods: {
      submitInfo() {
        let _this = this;
        let token = _this.getCookie("token");
        for (let i = 1; i <= _this.count; i++) {
          let data = _this.$qs.stringify({
            'title': _this.title[i],
            'value': _this.value[i],
          });
          _this.$http.post(_this.apiUrl("user/selection/addTitle"), data, {
            headers: {
              'token': token,
              'sid': _this.$route.query.sid
            }
          }).then((res) => {
            // console.log(res.data);
            if(res.data.statusCode === 200){
              Toast.success('添加成功');
              _this.count = 1;
              _this.title = [];
              _this.value = [];
              _this.audioPlay();
            }
            else{
              Toast.fail('添加失败');
            }
          });
        }
      },
      addRule() {
        let _this = this;
        _this.count++;
      },
      delRule(index) {
        let _this = this;
        Dialog.confirm({
          title: '您确定要删除吗？',
        }).then(() => {
          _this.title.splice(index, 1);
          _this.value.splice(index, 1);
          _this.count--;
        }).catch(() => {
        });
      },
      changeStyle() {
        document.getElementById("delete").style.borderStyle = "dashed";
      },
      audioPlay() {
        let _this = this;
        let RandomStr = _this.randomWord(true, 10, 20);
        _this.$emit('RuleStatus', RandomStr);
      },
    },
    mounted() {
      let _this = this;
      _this.changeStyle();
    }
  }
</script>

<style scoped>

</style>
